<template>
  <div class="table-container">
    <!-- modal -->
    <!-- @ok="modalSubmit(recordModel)"
      @cancel="modalCancel(recordModel)" -->
    <a-modal
      wrap-class-name="modal-wrap-container"
      :title="recordModel.title"
      :visible="recordModel.visible"
      :confirm-loading="recordModel.confirmLoading"
      width="50%"
      @cancel="recordModel.visible = false"
    >
      <Record :record="recordModel.record" :ref="recordModel.ref" />

      <template #footer>
        <a-button @click="recordModel.visible = false">关闭</a-button>
      </template>
    </a-modal>

    <a-table
      v-bind="tableProps"
    >
      <template #send_status="text">
        <span :class="['icon', {
          'icon--red': !text
        }]" />  {{ text ? '发送成功' : '发送失败' }}
      </template>
      <template #operation="text, row">
        <a class="check-record" @click.prevent="handlerRow(row)">查看</a>
      </template>
    </a-table>
  </div>
</template>
<script>
import { getMessageRecord, getMessageRecords } from '@/api/flow/admin_message';
import table from '@/utils/mixins/search/table'
import props from '../props';
import modal from './modal';
import Record from './modal/Record';

export default {
  mixins: [table, props, modal],

  components: {
    Record
  },

  data () {
    return {
      columns: [
        {
          title: '姓',
          dataIndex: 'borrowing_last_name',
          ellipsis: true,
          scopedSlots: { customRender: 'number' },
        },
        {
          title: '名',
          dataIndex: 'borrowing_first_name',
          align: 'center',
        },
        {
          title: '手机号',
          dataIndex: 'borrowing_mobile',
          ellipsis: true,
        },
        {
          title: '发送时间',
          dataIndex: 'send_time',
          ellipsis: true,
        },
        {
          title: '发送状态',
          dataIndex: 'send_status',
          ellipsis: true,
          scopedSlots: { customRender: 'send_status' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
          fixed: 'right',
        },
      ],
    }
  },

  created () {
    this.tableHooksRequest()
  },

  computed: {
    tableParams () {
      const { per_page, page } = this.pagination
      return [per_page, page, {
        message_template: this.id
      }]
    },
  },

  methods: {
    // 查看发送详情
    handlerRow(row) {
      getMessageRecord(row.id)
        .then(data => {
          this.recordModel.visible = true;
          this.recordModel.record = data
        })
    },

     async tableHooksRequest () {
      try {
        const res = await this.getTableDatas(getMessageRecords, this.tableParams)
        return res
      } catch (error) {
        throw new Error(error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.check-record {
  margin-left: $margin-base;
}

.icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: $theme-color;
  margin-right: 8px;
}

.icon--red {
  background-color: $red;
}
</style>
